<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../lib/vue.js"></script>
    <script src="../lib/vue-router.js"></script>
    <link rel="stylesheet" href="../lib/animate.css">
    <script src="http://47.104.209.44/base/js/jquery-1.10.1.min.js"></script>
    <style>
        .box {
            height: 200px;
            width: 300px;
            background-color: antiquewhite;
            border: 1px solid #999;
        }
        .router-link-exact-active, .router-link-active{
            font-size: 30px;
            font-weight: bold;
            color:#f50;
        }
    </style>
</head>

<body>
    <div id="app">
        <h2>{{title}}</h2>
        <myhead></myhead>
        <router-view class="box"></router-view>
    </div>

    <!-- ----------------------------- -->
    <!-- 1级 -->
    <template id="main">
        <div>
            <h2>main - 微信的主路由</h2>
            <hr>
            <router-view></router-view>
            <hr>
            <myfoot></myfoot>
        </div>
    </template>
    <!-- 2级 -->
    <template id="wechat">
        <div>
            <h2>wechat ---- 微信</h2>
        </div>
    </template>
    <template id="contact">
        <div>
            <h1>contact - -- 通讯录</h1>
        </div>
    </template>
    <template id="find">
        <div>
            <h3>find --- 朋友圈</h3>
        </div>
    </template>
    <template id="mine">
        <div>
            <h3>mine --- 我的</h3>
        </div>
    </template>
    <template id="notfound">
        <div>
            <h2>404 - 404 - NotFound</h2>
        </div>
    </template>

    <template id="myfoot">
        <footer>
            <router-link v-for="(l,i) in flist" :key="i" :to="{name:l.name}">{{l.title}}
            </router-link>
        </footer>
    </template>
    <script>
        Vue.component('myhead', {
            template: "<h2>Head - daydayup</h2>"
        })
        Vue.component("myfoot", {
            template: "#myfoot",
            data() {
                return {
                    flist: [
                        { path: "/main/wechat", name: "wechat", icon: "", title: "微信" },
                        { path: "/main/contact", name: "contact", icon: "", title: "通讯录" },
                        { path: "/main/find", name: "find", icon: "", title: "朋友圈" },
                        { path: "/main/mine", name: "mine", icon: "", title: "我的" },
                    ]
                }
            }
        })

        const Main = {
            template: "#main"
        }

        const Wechat = {
            template: "#wechat"
        }

        const Contact = {
            template: "#contact"
        }

        const Find = {
            template: "#find"
        }
        const Mine = {
            template: "#mine"
        }
        const Notfound = {
            template: "#notfound"
        }
        const routes = [
            {
                path: "/",
                redirect: "/main"
            },
            {
                path: '/main',
                name: "main",
                redirect: "/main/wechat",
                component: Main,
                children: [
                    { path: "/main/wechat", name: "wechat", component: Wechat },
                    { path: "/main/contact", name: "contact", component: Contact },
                    { path: "/main/find", name: "find", component: Find },
                    { path: "/main/mine", name: "mine", component: Mine }
                ]
            },
            {
                path: "/404",
                name: "notFount",
                component: Notfound
            },
            {
                path: "*",
                redirect: "/404"
            }
        ]
        const router = new VueRouter({
            routes,
            mode: "hash"
        })
        const vm = new Vue({
            router,
            data: {
                title: "router2级"
            },
            components: {

            },
            watch: {
                '$route': function (to, from) {
                    console.log(to);
                    console.log(from);
                }
            },
            mounted() {
                document.getElementsByTagName("title")[0].innerHTML = this.title;
                console.log(this.$router);
                console.log(this.$route);
            }
        }).$mount("#app")
    </script>
</body>

</html>